<template>
    <div class="chatStyle">
        <div class="chatTitleStyle" v-if="talkStore.talkTitle || !talkStore.talkTitleStatus">
            <span @click="changeTalkNameBtn">{{talkStore.talkTitle}}</span>
            <svg t="1698345484399" class="deleteIconStyle" @click="deleteTalkBtn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6862" width="200" height="200"><path d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z" 
                fill="#ffffff" p-id="6863"></path></svg>
        </div>
        <HasNoChat v-if="!talkStore.talkTitle && talkStore.talkTitleStatus"/>
        <TalkContent v-else ref="TalkContentRef" @doLoading="doLoading"/>
        <DialogSetTitle @setTalkTitle="setTalkTitle" ref="DialogSetTitleRef" :talkTitle="talkStore.talkTitle"/>
        <Dialog ref="DialogRef" @dialogConfirmBtn="dialogConfirmBtn"/>
        <Loading :loadingStatus="loadingStatus"/>
    </div>
</template>
<script setup>
import { onMounted, ref ,getCurrentInstance} from 'vue'
import HasNoChat from './hasNoChat.vue'
import DialogSetTitle from './dialogSetTitle.vue'
import TalkContent from './talkContent.vue'
import useTalkStore from '@/store/modules/talk'
import Dialog from '@/components/dialog/index.vue'
import Loading from '@/components/loading/index.vue'
import { deleteConversationById } from '@/api/chat'

let talkStore = useTalkStore()
const setTalkTitle = (val)=>{
    talkStore.setTalkTitle(val)
}

const DialogSetTitleRef = ref()
const changeTalkNameBtn = ()=>{
    DialogSetTitleRef.value.clickCreateBtn(talkStore.talkTitle)
}

onMounted(()=>{
    console.log('chat生命周期开始');
    if(localStorage.getItem('talkName') != null){
        setTalkTitle(localStorage.getItem('talkName'))
    }
})

const DialogRef = ref()
const deleteTalkBtn = ()=>{
    DialogRef.value.clickCreateBtn('你确定删除当前对话吗？删除后将无法恢复')
    // deleteConversationById
}
const TalkContentRef = ref()
let loadingStatus = ref(false)
const dialogConfirmBtn = ()=>{
    if(localStorage.getItem('conversation_id') != null){
        loadingStatus.value = true
        deleteConversationById(localStorage.getItem('conversation_id')).then(()=>{
            loadingStatus.value = false
            localStorage.clear()
            TalkContentRef.value.msgList = []
            DialogRef.value.dialogCloseBtn()
            talkStore.setTalkTitle(null)
        }).catch(()=>{
            loadingStatus.value = false
        })
    }else{
        talkStore.setTalkTitle(null)
        talkStore.setTalkTitleStatus(true)
        localStorage.clear()
        DialogRef.value.dialogCloseBtn()
    }
}
const doLoading = (val)=>{
    loadingStatus.value = val
}
</script>
<style scoped lang="scss">
.chatStyle{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgb(255, 255, 255);
    padding-top: 40px;
    .chatTitleStyle{
        z-index: 99;
        width: 100%;
        top: 0;
        position: absolute;
        line-height: 40px;
        text-align: center;
        height: 40px;
        background: linear-gradient(to right, rgb(192, 192, 192),rgb(161, 161, 161));
        // background-color: rgb(133, 133, 133);
        color: white;
    }
    .deleteIconStyle{
        top: 6px;
        right: 10px;
        height: 28px;
        width: 28px;
        position: absolute;
    }
}
</style>